<template>
	<div>
		<el-form :inline="true"  style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="查询条件" prop="parameter" label-width="80px">
				<el-input v-model="parameter" style="width: 200px;" placeholder="请输入颜色编码/颜色名称"></el-input>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
				</div>
			</el-form-item>
			<el-form-item>
				<div style="float: left;margin-left: -10px;">
					<el-button type="primary" @click="addcolorbutton">新增颜色</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-table :data="colorData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" :max-height="tabHeight">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="color_id" label="颜色编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="color_name" label="颜色名称" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="showServerEdit(scope.$index,scope.row)">编辑</el-button>
					<el-button size="small" type="primary" @click="delServerEdit(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="text" :visible.sync="dialogUpdate" width="40%">
			<el-form :model="form" label-width="120px">
				<el-form-item label="颜色编码：">
					<el-input v-model="form.color_id" :disabled="text=='修改颜色'"></el-input>
				</el-form-item>
				<el-form-item label="颜色名称：">
					<el-input v-model="form.color_name"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateButton">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { selectallcolor,selectcolorbyid,updatecolor,deletecolor,createcolor } from '../../api/goods.js'
	export default {
		data() {
			return {
				colorData:[],
				parameter:'',
				form:{
					ckey:'',
					color_id:'',
					color_name:''
				},
				dialogUpdate:false,
				text:'',
				tabHeight:500
			};
		},
		methods:{
			querybutton(){
				if(this.parameter == ''){
					this.get_colorList();
				}else{
					this.colorData = [];
					selectcolorbyid({parameter:this.parameter}).then(response => {
						// console.log(this.parameter,'this.parameter');
						if(response.code ==0 ){
							this.colorData = response.data;
						}
					})
				}
			},
			showExport(){
				
			},
			get_colorList() {
			  selectallcolor().then(response => {
				// console.log(response,'response22');
			    if(response.code ==0 ){
			    	this.colorData = response.data;
			    }
			  })
			},
			addcolorbutton(){
				this.dialogUpdate = true;
				this.text = '新增颜色';
				// this.form.ckey = '';
				this.form.color_id = '';
				this.form.color_name = '';
			},
			showServerEdit(index, row) {
				this.dialogUpdate = true;
				this.text = '修改颜色';
				this.form.color_id = row.color_id;
				this.form.color_name = row.color_name;
				this.form.ckey = row.ckey;
				// this.selectRow=row;
			},
			updateButton(){
				if(this.text == '新增颜色'){
					if(this.form.color_id == '' || this.form.color_name == ''){
						this.$notify({
						  title: '警告',
						  message: '请填写完整信息',
						  type: 'info',
						})
						return ;
					}
					for(let i=0;i<this.colorData.length;i++){
						if(this.form.color_id == this.colorData[i].color_id){
						 this.$notify({
							  title: '警告',
							  message: '颜色id已存在',
							  type: 'info',
							})
							return ;
						}
					}
					createcolor(this.form).then(() => {
					  this.$notify({
					    title: '成功',
					    message: '创建成功',
					    type: 'success',
					    duration: 2000
					  })
					})
					this.get_colorList();
				}else{
					console.log(this.form,'this.form')
					updatecolor(this.form).then(() => {
					  this.$notify({
					    title: '成功',
					    message: '更新成功',
					    type: 'success',
					    duration: 2000
					  })
					})
					this.get_colorList();
				}
				this.dialogUpdate = false;
			},
			delServerEdit(index, indexPath) {
				this.$confirm('是否确定删除'+indexPath.color_id+'颜色编码?', '提示', {
					confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
				}).then(() => {
					// console.log(indexPath.ckey,'indexPath.ckey');
				deletecolor({color_id:indexPath.color_id}).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '删除成功',
				    type: 'success'
				  })
				  this.get_colorList();
				})
				}).catch(() => {
					this.$message({
						type: 'info',message: '已取消删除'
					});
				});
			},
		
		},
		created(){
			this.tabHeight = document.documentElement.scrollHeight - 160 || document.body.scrollHeight -160;
			this.get_colorList();
		}
	}
</script>

<style>

</style>
